const gulp=require('gulp')//gulp 模块
const uglify=require('gulp-uglify')//压缩JS去空格
const babel=require('gulp-babel')//es6转es5 浏览器兼容babel
const rev=require('gulp-rev')//加随机名，内容修改生成新的随机名
const clean=require('gulp-clean')//删除目录文件的
const minify=require('gulp-minify-css')//压缩css 去空格注释的
const nony=require('gulp-tinypng-nokey')//压缩图片
const collector=require('gulp-rev-collector')//根据temp记录规则 替换HTML路径
const htmlmin=require('gulp-htmlmin')//压缩


//清空，打包之前，一般需要1:先清空原来的文件，保证当前文件是最新的。2:重新gulp js
const fs=require('fs')
const { dir } = require('console')
gulp.task('clean',(over)=>{
    if(fs.existsSync('dist/')){

        gulp.src('dist/',{read: true})
        .pipe(clean())
    }
    setTimeout(() => {
        over()
    }, 2000);
})

//打包HTML
gulp.task('html',(over)=>{
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp
    .src(['temp/**/*.json', 'src/*.html'])
    .pipe( collector())

    .pipe(htmlmin(options))
    .pipe(gulp.dest('./dist/'))
    over()
})

//打包图片
gulp.task('imgs',(over)=>{
    gulp.src('./src/imgs/*.*')
    .pipe(nony())
    .pipe(gulp.dest('./dist/imgs/'))
    setTimeout(() => {
        over()
    }, 90000);
})




//打包CSs
gulp.task('css',(over)=>{
    gulp.src('./src/css/*.css')
    //放文件
    //压缩CSS
        .pipe(minify())
        .pipe(rev())
    .pipe(gulp.dest('./dist/css/'))
    //每次打包
    //将css对应的随机名打包到JSON中
    .pipe(rev.manifest())
    .pipe(gulp.dest('temp/css'))
    setTimeout(() => {
        over()
    }, 3000);
})





//打包JS
gulp.task('js',(over)=>{
    //先读取文件
    gulp.src('./src/js/*.js')
    //.pipe(模块名())
    //转，兼容
    .pipe(babel({"presets": ["env"]}))
    //压缩
    .pipe(uglify())
    //gulp-rev这是一款为静态文件随机添加一串hash值, 解决cdn缓存问题
    .pipe(rev())
    .pipe(gulp.dest('./dist/js/'))

    //每次打包
    //将js对应的随机名打包到JSON中
    .pipe(rev.manifest())
    .pipe(gulp.dest('temp/js'))
    over()
})

//批量打包
gulp.task('build',gulp.series('clean','js','css','imgs','html',()=>{
console.log('打包完成！！！');
}))
//通过node搞web服务器开发使用
const watch=require('gulp-watch')
const server=require('browser-sync').create()
gulp.task('serve',()=>{
    server.init({
        server:'./src',
        port:80
    })
})



//监控文件修改
watch('src/*.html',function(){
    console.log('您修改html文件了');
    server.reload()
})
watch('src/js/*.js',function(){
    console.log('您修改js文件了');
    server.reload()
})
watch('src/js/*.css',function(){
    console.log('您修改css文件了');
    server.reload()
})